<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div class="box">
    <!-- 传递数据的时候，如果没有 v-bind 进行绑定，一律为字符型 -->
    <!-- 特别是 number 以及 boolean 两个类型传值经常会出现错误 -->
    <hello-world
      :my-age='age'
      :num="num"
      :bol="true"
      :parentarr="arr"
      :parentobj="obj">
    </hello-world>
  </div>

  <script src="./scripts/vue.js"></script>
  <script>

    // 声明子组件
    Vue.component('hello-world', {
      props: ['myAge', 'num', 'bol', 'parentarr', 'parentobj'],
      data: function () {
        return {
          name: 'Tom'
        }
      },
      template: `
        <div>
          <p>{{name}}</p>
          <p>{{ myAge }}</p>
          <p>{{ typeof num }}</p>
          <p>{{ typeof bol }}</p>
          <p>
            <span v-for="(item, index) in parentarr" :key="index">{{ item }}</span>
          </p>
          <p>{{ parentobj.name }}</p>
        </div>
      `
    })

    var vm = new Vue({
      el: '.box',
      data: {
        age: 3,
        num: 10,
        arr: [1, 2, 3],
        obj: {
          name: '斯派克',
          age: 18
        }
      }
    })
  </script>
</body>

</html>